<template>
	<view class="main-box">
		<view class="navigator-bar" :style="{'padding-top': safeTop + 'px'}" v-if="type !== 0">
			<image class="back-img" src="/static/close1.png" @click="back()"></image>
			<text class="page-title">标签 {{ chooseList.length }}/5</text>
			<view class="submit-button" @click="back()">完成</view>
		</view>
		<scroll-view scroll-y="true" class="interest-list"
			:style="type === 0 ? {'height': '100vh'} : {'height': `calc(100% - ${safeTop}px - 86rpx)`}">
			<text class="title" v-if="type === 0">选择感兴趣的内容</text>
			<text class="second-title" v-if="type === 0">定制你的专属BOOM</text>
			<view class="type-box" v-for="interest in interests">
				<text class="type-title">{{ interest.typeName }}</text>
				<view class="item-box">
					<view class="interest-box" v-for="item in interest.items" @click="chooseItem(item.name)">
						<view class="interest-img-box"
							:style="chooseList.indexOf(item.name) >= 0 ? {'border': '2rpx solid #FF5E2E'}: {'border': '2rpx solid #FFFFFF'}">
							<image class="interest-img" :src="item.url"></image>
						</view>
						<text class="interest-text">{{ item.name }}</text>
					</view>
				</view>
			</view>
			<view class="next-button" @click="confirmChoose()" v-if="type === 0">
				{{ chooseList.length < 5 ? `最少选择5个兴趣(${chooseList.length}/5)` : '进入首页' }}
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				interests: [{
						typeName: '运动',
						items: [{
								name: '篮球',
								url: '/static/interestTag-1.png'
							},
							{
								name: '乒乓球',
								url: '/static/interestTag-2.png'
							},
							{
								name: '足球',
								url: '/static/interestTag-3.png'
							},
							{
								name: '羽毛球',
								url: '/static/interestTag-4.png'
							},
							{
								name: '游泳',
								url: '/static/interestTag-5.png'
							},
							{
								name: '瑜伽',
								url: '/static/interestTag-6.png'
							},
							{
								name: '跳舞',
								url: '/static/interestTag-7.png'
							},
							{
								name: '跑步',
								url: '/static/interestTag-8.png'
							}
						]
					},
					{
						typeName: '户外',
						items: [{
								name: '骑行',
								url: '/static/interestTag-9.png'
							},
							{
								name: '钓鱼',
								url: '/static/interestTag-10.png'
							},
							{
								name: '探险',
								url: '/static/interestTag-11.png'
							},
							{
								name: '爬山',
								url: '/static/interestTag-12.png'
							},
							{
								name: '野营',
								url: '/static/interestTag-13.png'
							}
						]
					},
					{
						typeName: '游戏',
						items: [{
								name: '狼人杀',
								url: '/static/interestTag-14.png'
							},
							{
								name: '剧本杀',
								url: '/static/interestTag-15.png'
							},
							{
								name: '密室逃脱',
								url: '/static/interestTag-16.png'
							},
							{
								name: '棋类',
								url: '/static/interestTag-17.png'
							},
							{
								name: '扑克',
								url: '/static/interestTag-18.png'
							},
							{
								name: '麻将',
								url: '/static/interestTag-19.png'
							}
						]
					},
					{
						typeName: '生活',
						items: [{
								name: '美食',
								url: '/static/interestTag-20.png'
							},
							{
								name: '电影',
								url: '/static/interestTag-21.png'
							},
							{
								name: '演出',
								url: '/static/interestTag-22.png'
							},
							{
								name: '展览',
								url: '/static/interestTag-23.png'
							},
							{
								name: '逛街',
								url: '/static/interestTag-24.png'
							},
							{
								name: '手工',
								url: '/static/interestTag-25.png'
							},
							{
								name: '摄影',
								url: '/static/interestTag-26.png'
							},
							{
								name: 'K歌',
								url: '/static/interestTag-27.png'
							}
						]
					}
				],
				chooseList: [],
				type: 0,
				safeTop: 0
			};
		},
		onLoad(e) {
			this.safeTop = this.$safeTop;
			if (e.type) {
				this.type = +e.type;
			}
			if (e.labels) {
				this.chooseList = e.labels.split(',');
			}
		},
		methods: {
			chooseItem(name) {
				if (this.chooseList.includes(name)) {
					let index = this.chooseList.findIndex(item => item === name);
					this.chooseList.splice(index, 1);
				} else {
					if ((this.type === 3 || this.type === 1) && this.chooseList.length === 5) {
						uni.showToast({
							title: '最多选择5个标签',
							icon: 'none'
						});
						return;
					}
					if (this.type === 2 && this.chooseList.length === 10) {
						uni.showToast({
							title: '最多选择10个标签',
							icon: 'none'
						});
						return;
					}
					this.chooseList.push(name);
				}
			},
			back() {
				uni.navigateBack();
				switch (this.type) {
					case 0:
						break;
					case 1:
						uni.$emit('chooseLabel', this.chooseList);
						break;
					case 2:
						if (this.chooseList.length < 5) {
							uni.showToast({
								title: '至少选择5个标签',
								icon: 'none'
							});
							return;
						}
						uni.$emit('changeLabel', this.chooseList);
						break;
					case 3:
						uni.$emit('chooseLabelForShop', this.chooseList);
						break;
				}
			},
			confirmChoose() {

			}
		}
	}
</script>

<style lang="scss">
	.main-box {
		width: 100vw;
		height: 100vh;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;

		.navigator-bar {
			width: 100vw;
			height: 86rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.back-img {
				width: 36rpx;
				height: 36rpx;
				margin-left: 42rpx;
				z-index: 999;
			}

			.page-title {
				font-size: 38rpx;
				font-weight: bold;
				color: #222222;
				position: absolute;
				width: 100vw;
				line-height: 38rpx;
				text-align: center;
			}

			.submit-button {
				margin-right: 42rpx;
				width: 123rpx;
				height: 61rpx;
				background: #FF5E2E;
				border-radius: 31rpx;
				font-size: 31rpx;
				line-height: 61rpx;
				text-align: center;
				font-weight: 400;
				color: #FFFFFF;
				z-index: 999;
			}
		}

		.interest-list {
			width: 100vw;

			.title {
				font-size: 50rpx;
				font-weight: bold;
				color: #222222;
				margin-top: 180rpx;
			}

			.second-title {
				font-size: 31rpx;
				font-weight: 400;
				color: #222222;
				margin-top: 32rpx;
				margin-bottom: 45rpx;
			}

			.type-box {
				margin-top: 15rpx;
				width: calc(100vw - 140rpx);
				padding: 0 70rpx 0 70rpx;

				.type-title {
					font-size: 31rpx;
					font-weight: bold;
					color: #222222;
				}

				.item-box {
					display: flex;
					flex-wrap: wrap;
					width: 100%;
					margin-top: 46rpx;

					.interest-box {
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 25%;
						margin-bottom: 32rpx;

						.interest-img-box {
							width: 115rpx;
							height: 115rpx;
							border-radius: 60rpx;

							.interest-img {
								width: 115rpx;
								height: 115rpx;
							}
						}

						.interest-text {
							font-size: 23rpx;
							font-weight: 400;
							color: #222222;
							margin-top: 15rpx;
						}
					}
				}
			}

			.next-button {
				width: 566rpx;
				height: 96rpx;
				background: #FF5E2E;
				border-radius: 23rpx;
				font-size: 31rpx;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 96rpx;
				text-align: center;
				margin-top: 20rpx;
			}
		}
	}
</style>
